<template>
    <div id="app">
        <el-container>
            <el-aside class="jaside" style="width: 200px">
                <keep-alive>
                    <SideNav></SideNav>
                </keep-alive>
            </el-aside>
            <el-container>
                <el-header class="jhead">
                    <keep-alive>
                        <Header v-show="$route.meta.showPageHeader"></Header>
                    </keep-alive>
                </el-header>
                <el-main class="jmain">
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<script>
    import SideNav from "@/components/SideNav/SideNav";
    import Header from "@/components/Header";

    export default {
        name: 'App',
        components: {
            SideNav, Header
        }
    }
</script>

<style>

    html,
    body,
    #app,
    .el-container {
        height: 100%;
    }


    #app {
        margin-top: 0px;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

    .jhead {

        text-align: center;
        line-height: 60px;
        width: 100%;
        position: fixed;
        left: 200px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-left: 0px;

    }

    .jaside {
        width: 200px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        position: fixed;
    }

    .jmain{
        position: absolute;
        left: 200px;
        top: 60px;
        right: 0px;
    }

</style>
